<template>
    <div class="login_body">

    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    import MiIdentify from "@/components/MiIdentify.vue";
    import $http from "@/http";
    import {API} from "@/aconst/API";
    import {removeAllCache} from "@/utils/storage";
    import {refreshUserInfo} from "@/utils/userKit";
    import {TagsViewModule} from "@/store/modules/tags-view";
    import $K from "@/utils/kit";

    @Component({
        name: 'LoginToApp',
        components: {MiIdentify}
    })
    export default class LoginToApp extends Vue {
        get token() {
            return this.$route.query.token;
        }

        async mounted() {
            if (!this.token || this.token == "") return false;
            $http.post(API.tokenLogin, {token: this.token})
                .then((res: any) => {
                    if (res.success) {
                        //刷新字典
                        refreshUserInfo(res);
                        TagsViewModule.delAllCachedViews();
                        TagsViewModule.delAllViews();
                        $K.to("/index");
                        // window.location.reload();
                    } else {
                        removeAllCache();
                        $K.to("/login");
                    }
                });
        }

        activated() {
            // refreshHtmlVersion();
        }

    }
</script>


<style lang="scss" scoped>
    .login_body {
        width: 100%;
        height: 100vh;
        background: url(../assets/bg.jpg) repeat-x;
        background-size: auto 100%;
        position: relative;
    }

    .login_box {
        position: absolute;
        background-color: #6b56d8;
        width: 500px;
        height: 440px;
        top: 50%;
        left: 50%;
        margin: -220px auto auto -250px;
        border-radius: 10px;
    }

    .login_box .title {
        text-align: center;
        font-size: 24px;
        color: #fff;
        padding: 30px 0;
    }

    input:focus {
        outline: none;
    }

    .login_form #user,
    .login_form #password,
    .login_form #yzm {
        width: 70%;
        display: block;
        margin: auto;
        border: 0;
        padding: 15px 20px;
        border-radius: 5px;
        padding-left: 60px;
        font-size: 16px;
        margin-bottom: 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .login_form #user {
        background: #fff url(../assets/login_icon1.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #password {
        background: #fff url(../assets/login_icon2.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #yzm {
        background: #fff url(../assets/valid_code.png) no-repeat 18px center;
        background-size: 18px;
    }

    .yzm {
        position: relative;
    }

    .yzmImg {
        position: absolute;
        height: 100%;
        width: 120px;
        background: rgba(0, 0, 0, 1);
        right: 15%;
        top: 0;
        z-index: 2;
    }

    .yzm #yzm {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    button {
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
    }

    .login_form #login {
        background: #eb4405;
        display: block;
        width: 70%;
        margin: auto;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        padding: 15px 20px;
        margin-top: 60px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .login_form #login:hover {
        background: #db440b;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .logo {
        position: absolute;
        top: -63px;
        width: 341px;
        left: 50%;
        margin-left: -170px;
        z-index: 0;
    }
</style>
